<template>
    <div>
        <div class="" style="overflow-x: hidden;">
            <div>
                <div id="canvasDiv" class="canvasDiv" style="width:100%">
                    <canvas id="confernceWhiteboard" width="1000" height="500"></canvas>
                </div>
                <div class="op">
                    <div id="nav">
                        <wbcolor class="texcolor" v-show="colorset"></wbcolor>
                        <ul id="toolsul" class="tools">
                            <li id="toolsPencil" data-type="pen" class="active">
                                <i class="icon-tools icon-pen-select icon-pan" data-default='icon-tools icon-pen-black'></i>
                            </li>
                            <li data-type="remove">
                                <i class="icon-tools icon-remove-black" data-default='icon-tools icon-remove-black'></i>
                            </li>
                            <li data-type="text">
                                <i class="icon-tools icon-text-black" data-default='icon-tools icon-text-black'></i>
                            </li>
                            <li data-type="arrow">
                                <i class="icon-tools icon-arrow-black icon-arrow" data-default='icon-tools icon-arrow-black'></i>
                            </li>
                            <li data-type="line">
                                <i class="icon-tools icon-line-black" data-default='icon-tools icon-line-black'></i>
                            </li>
                            <li data-type="dottedline">
                                <i class="icon-tools icon-dottedline-black" data-default='icon-tools icon-dottedline-black'></i>
                            </li>
                            <li data-type="circle">
                                <i class="icon-tools icon-circle-black" data-default='icon-tools icon-circle-black'></i>
                            </li>
                            <li data-type="ellipse">
                                <i class="icon-tools icon-ellipse-black" data-default='icon-tools icon-ellipse-black'></i>
                            </li>
                            <!--<li class="hide" data-type="square">-->
                                <!--<i class="icon-tools icon-square-black" data-default='icon-tools icon-square-black'></i>-->
                            <!--</li>-->
                            <li data-type="rectangle">
                                <i class="icon-tools icon-rectangle-black" data-default='icon-tools icon-rectangle-black'></i>
                            </li>
                            <li data-type="rightangle">
                                <i class="icon-tools icon-rightangle-black" data-default='icon-tools icon-rightangle-black'></i>
                            </li>
                            <li data-type="equilateral">
                                <i class="icon-tools icon-equilateral-black" data-default='icon-tools icon-equilateral-black'></i>
                            </li>
                            <!--<li  data-type="isosceles">-->
                                <!--<i class="icon-tools icon-isosceles-black" data-default='icon-tools icon-isosceles-black'></i>-->
                            <!--</li>-->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


</template>

<script>
    import Wbcolor from "../components/Wbcolor";
    import message from "../../static/js/message";
    export default {
        components: {Wbcolor},
        data(){
            return{
                drawType: null,
                whiteboardCanvas: null,
                chache: null,
                textbox: null,
                drawingObject: null,
                mouseFrom: {},
                mouseTo: {},
                doDrawing: false,
                moveCount: 1,
                drawWidth: 2,
                color: "#E34F51",
                colorset:false,
                zoom: window.zoom ? window.zoom : 1,
            }

        },
        props:['mark'],
        mounted() {



                var self = this;

                message.$on('receiveMessage',function (message) {
                   console.log('white message',message);
                   self.showCache(message);
                })

                this.whiteboardCanvas = new fabric.Canvas('confernceWhiteboard');
                var theCanvas = document.getElementById('confernceWhiteboard');
                var context = theCanvas.getContext('2d');
                context.globalAlpha = 1;
                context.fillStyle = 'rgba(255, 255, 255, 0)';
                this.whiteboardCanvas.isDrawingMode = true;
                this.whiteboardCanvas.freeDrawingBrush.color = this.color;
                this.whiteboardCanvas.on("mouse:down", function (options) {
                    var xy = self.transformMouse(options.e.offsetX, options.e.offsetY);
                    self.mouseFrom.x = xy.x;
                    self.mouseFrom.y = xy.y;
                    self.doDrawing = true;
                });
                this.whiteboardCanvas.on({
                    'mouse:up': (options) => {
                        var xy = self.transformMouse(options.e.offsetX, options.e.offsetY);
                        self.mouseTo.x = xy.x;
                        self.mouseTo.y = xy.y;
                        // drawing();
                        self.drawingObject = null;
                        self.moveCount = 1;
                        self.doDrawing = false;
                        self.updateCanvas();
                    }
                });

                this.whiteboardCanvas.on("selection:created", function (e) {
                    if (e.target._objects) {
                    //多选删除
                    var etCount = e.target._objects.length;
                    for (var etindex = 0; etindex < etCount; etindex++) {
                        self.whiteboardCanvas.remove(e.target._objects[etindex]);
                    }
                    } else {
                    //单选删除
                    self.whiteboardCanvas.remove(e.target);
                    }
                    self.whiteboardCanvas.discardActiveObject(); //清楚选中框
                });

                this.whiteboardCanvas.on("mouse:move", function (options) {
                    if ( self.moveCount % 2 && ! self.doDrawing) {
                        //减少绘制频率
                        return;
                    }
                    self.moveCount++;
                    var xy = self.transformMouse(options.e.offsetX, options.e.offsetY);
                    self.mouseTo.x = xy.x;
                    self.mouseTo.y = xy.y;
                    self.drawing();
                });

                this.bindClick();

                message.$on('setcolor',function (color) {
                    self.color = color;
                    self.whiteboardCanvas.freeDrawingBrush.color = self.color;
                });

            },
        methods:{


            bindClick(){// 侧边栏按钮
                var self = this;
                jQuery("#toolsul")
                .find("li")
                .on("click", function () {
                //设置样式
                jQuery("#toolsul")
                    .find("li>i")
                    .each(function () {
                    jQuery(this).attr("class", jQuery(this).attr("data-default"));
                    });
                jQuery(this)
                    .addClass("active")
                    .siblings()
                    .removeClass("active");
                jQuery(this)
                    .find("i")
                    .attr(
                    "class",
                    jQuery(this)
                        .find("i")
                        .attr("class")
                        .replace("black", "select")
                    );
                self.drawType = jQuery(this).attr("data-type");
                self.whiteboardCanvas.isDrawingMode = false;
                if (self.textbox) {
                    //退出文本编辑状态
                    self.textbox.exitEditing();
                    self.textbox = null;
                    self.updateCanvas();
                }
                if (self.drawType == "pen") {
                    self.colorset = false;
                    self.whiteboardCanvas.isDrawingMode = true;
                } else if (self.drawType == "remove") {
                    self.colorset = false;
                    self.whiteboardCanvas.selection = true;
                    self.whiteboardCanvas.skipTargetFind = false;
                    self.whiteboardCanvas.selectable = true;
                }else if (self.drawType == "text"){
                    self.colorset = true;
                }
                else {
                    self.colorset = false;
                    self.whiteboardCanvas.skipTargetFind = true; //画板元素不能被选中
                    self.whiteboardCanvas.selection = false; //画板不显示选中
                }
                });
            },
            drawing(){
                if (this.drawingObject) {
                    this.whiteboardCanvas.remove(this.drawingObject);
                }
                var canvasObject = null;
                switch (this.drawType) {
                    case "arrow": //箭头
                        canvasObject = new fabric.Path(this.drawArrow(this.mouseFrom.x, this.mouseFrom.y, this.mouseTo.x, this.mouseTo.y, 30, 30), {
                            stroke: this.color,
                            fill: "rgba(255,255,255,0)",
                            strokeWidth: this.drawWidth
                        });
                        break;
                    case "line": //直线
                        canvasObject = new fabric.Line([this.mouseFrom.x, this.mouseFrom.y, this.mouseTo.x, this.mouseTo.y], {
                            stroke: this.color,
                            strokeWidth: this.drawWidth
                        });
                        break;
                    case "dottedline": //虚线
                        canvasObject = new fabric.Line([this.mouseFrom.x, this.mouseFrom.y, this.mouseTo.x, this.mouseTo.y], {
                            strokeDashArray: [3, 1],
                            stroke: this.color,
                            strokeWidth: this.drawWidth
                        });
                        break;
                    case "circle": //正圆
                        var left = this.mouseFrom.x,
                        top = this.mouseFrom.y;
                        var radius = Math.sqrt((this.mouseTo.x - left) * (this.mouseTo.x - left) + (this.mouseTo.y - top) * (this.mouseTo.y - top)) / 2;
                        canvasObject = new fabric.Circle({
                            left: left,
                            top: top,
                            stroke: this.color,
                            fill: "rgba(255, 255, 255, 0)",
                            radius: radius,
                            strokeWidth: this.drawWidth
                        });
                        break;
                    case "ellipse": //椭圆
                        var left = this.mouseFrom.x,
                        top = this.mouseFrom.y;
                        var radius = Math.sqrt((this.mouseTo.x - left) * (this.mouseTo.x - left) + (this.mouseTo.y - top) * (this.mouseTo.y - top)) / 2;
                        canvasObject = new fabric.Ellipse({
                            left: left,
                            top: top,
                            stroke: this.color,
                            fill: "rgba(255, 255, 255, 0)",
                            originX: "center",
                            originY: "center",
                            rx: Math.abs(left - this.mouseTo.x),
                            ry: Math.abs(top - this.mouseTo.y),
                            strokeWidth: this.drawWidth
                        });
                        break;
                    case "square": //TODO:正方形（后期完善）
                        break;
                    case "rectangle": //长方形
                        var path =
                        "M " +
                        this.mouseFrom.x +
                        " " +
                        this.mouseFrom.y +
                        " L " +
                        this.mouseTo.x +
                        " " +
                        this.mouseFrom.y +
                        " L " +
                        this.mouseTo.x +
                        " " +
                        this.mouseTo.y +
                        " L " +
                        this.mouseFrom.x +
                        " " +
                        this.mouseTo.y +
                        " L " +
                        this.mouseFrom.x +
                        " " +
                        this.mouseFrom.y +
                        " z";
                        canvasObject = new fabric.Path(path, {
                            left: left,
                            top: top,
                            stroke: this.color,
                            strokeWidth: this.drawWidth,
                            fill: "rgba(255, 255, 255, 0)"
                        });
                        //也可以使用fabric.Rect
                        break;
                    case "rightangle": //直角三角形
                        var path = "M " + this.mouseFrom.x + " " + this.mouseFrom.y + " L " + this.mouseFrom.x + " " + this.mouseTo.y + " L " + this.mouseTo.x + " " + this.mouseTo.y + " z";
                        canvasObject = new fabric.Path(path, {
                            left: left,
                            top: top,
                            stroke: this.color,
                            strokeWidth: this.drawWidth,
                            fill: "rgba(255, 255, 255, 0)"
                        });
                        break;
                    case "equilateral": //等边三角形
                        var height = this.mouseTo.y - this.mouseFrom.y;
                        canvasObject = new fabric.Triangle({
                            top: this.mouseFrom.y,
                            left: this.mouseFrom.x,
                            width: Math.sqrt(Math.pow(height, 2) + Math.pow(height / 2.0, 2)),
                            height: height,
                            stroke: this.color,
                            strokeWidth: this.drawWidth,
                            fill: "rgba(255,255,255,0)"
                        });
                        break;
                    case "isosceles":
                        break;
                    case "text":
                        var textbox = new fabric.Textbox("", {
                            left: this.mouseFrom.x,
                            top: this.mouseFrom.y,
                            width: 150,
                            fontSize: 18,
                            borderColor: "#2c2c2c",
                            fill: this.color,
                            hasControls: false
                        });
                        this.textbox = textbox;
                        this.whiteboardCanvas.add(this.textbox);
                        this.textbox.enterEditing();
                        this.textbox.hiddenTextarea.focus();
                        console.log(this.textbox);
                        break;
                    case "remove":
                        break;
                    default:
                        break;
                }
                if (canvasObject) {
                // canvasObject.index = getCanvasObjectIndex();
                 this.whiteboardCanvas.add(canvasObject); //.setActiveObject(canvasObject)
                this.drawingObject = canvasObject;
                }
            },
            drawArrow(fromX, fromY, toX, toY, theta, headlen){// 绘制箭头
                theta = typeof theta != "undefined" ? theta : 30;
                headlen = typeof theta != "undefined" ? headlen : 10;
                // 计算各角度和对应的P2,P3坐标
                var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
                angle1 = (angle + theta) * Math.PI / 180,
                angle2 = (angle - theta) * Math.PI / 180,
                topX = headlen * Math.cos(angle1),
                topY = headlen * Math.sin(angle1),
                botX = headlen * Math.cos(angle2),
                botY = headlen * Math.sin(angle2);
                var arrowX = fromX - topX,
                arrowY = fromY - topY;
                var path = " M " + fromX + " " + fromY;
                path += " L " + toX + " " + toY;
                arrowX = toX + topX;
                arrowY = toY + topY;
                path += " M " + arrowX + " " + arrowY;
                path += " L " + toX + " " + toY;
                arrowX = toX + botX;
                arrowY = toY + botY;
                path += " L " + arrowX + " " + arrowY;
                return path;
            },
            transformMouse(mouseX, mouseY){
                return { x: mouseX / this.zoom, y: mouseY / this.zoom };
            },
            showCache(data){
                // this.whiteboardCanvas = new fabric.Canvas('confernceWhiteboard');
                this.whiteboardCanvas.loadFromJSON(JSON.parse(data ||this.chache));
                this.whiteboardCanvas.renderAll();
            },
            updateCanvas(){
                var canvasStringify = JSON.stringify(this.whiteboardCanvas);
                this.chache = canvasStringify;
                if (!this.textbox){
                  this.sedMessage();
                }
            },
            clearCanvas() {
                this.whiteboardCanvas.clear();
            },
            sedMessage(){
                var code = this.chache;
                message.$emit('sendwhiteboard',code);
            }
        }
    }
</script>

<style scoped>
  /*@import "../../static/css/normal.css";*/
  /*@import "../../static/css/whiteboard.css";*/


  .tools {
      list-style: none;
      margin: 0;
      padding: 0;
  }

  .tools li {
      /*width: 100%;*/
      width: 60px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 28px;
      /*background:rgba(44,48,64,1);*/
      cursor: pointer;
      position: relative;
      opacity: 1;
  }

  .tools li:hover {
      /*background: #f2f1f2;*/
      background:rgba(0,0,0,1);
      opacity:0.80;
      /*background:rgba(255,255,255,1);*/
      /*opacity:0.22;*/
  }

  .tools li.active {
      /*background: #e34f51;*/
      background:rgba(0,0,0,1);
      opacity:0.80;
      /*background:rgba(255,255,255,1);*/
      /*opacity:0.22;*/
  }

  .hide {
      display: none;
  }

  .canvasDiv {
      position: relative;
      width: 100%;
      height: 100%;
      background:rgba(255,255,255,0);/*关键点*/
  }

  .icon-tools {
      display: inline-block;
      width: 28px;
      height: 28px;
      /*background-image: url("../../static/whiteboardimg/pan_icon.png");*/
      background-repeat: no-repeat;
      margin-top: 10px;
  }

  .icon-draggle-black{
      background-image: url("../../static/whiteboardimg/yidong-3.png");
  }

  .icon-draggle-select{
      background-image: url("../../static/whiteboardimg/yidong-3.png");
  }

  .icon-pan{
      background-image: url("../../static/whiteboardimg/pan_icon.png");
  }

  .icon-arrow{
      background-image: url("../../static/whiteboardimg/down-jiantou.png");
  }



  .icon-pen-black {
      background-image: url("../../static/whiteboardimg/pan_icon.png");

  }

  .icon-pen-select {
      background-image: url("../../static/whiteboardimg/pan_icon.png");
  }



  .icon-text-black {
      background-image: url("../../static/whiteboardimg/txt.png");
  }

  .icon-text-select {
      background-image: url("../../static/whiteboardimg/txt.png");
  }

  .icon-dottedline-arrow-black {
      /*background-position: -84px -56px;*/
  }

  .icon-dottedline-arrow-select {
      /*background-position: -112px -56px;*/
  }

  .icon-line-black {
      background-image: url("../../static/whiteboardimg/line.png");
  }

  .icon-line-select {
      background-image: url("../../static/whiteboardimg/line.png");
  }

  .icon-dottedline-black {
      background-image: url("../../static/whiteboardimg/xuxian.png");
  }

  .icon-dottedline-select {
      background-image: url("../../static/whiteboardimg/xuxian.png");
  }

  .icon-arrow-black {
      background-image: url("../../static/whiteboardimg/down-jiantou.png");
  }

  .icon-arrow-select {
      background-image: url("../../static/whiteboardimg/down-jiantou.png");
  }

  .icon-circle-black {
      background-image: url("../../static/whiteboardimg/yuan-2.png");
  }

  .icon-circle-select {
      background-image: url("../../static/whiteboardimg/yuan-2.png");
  }

  .icon-ellipse-black {
      background-image: url("../../static/whiteboardimg/tuoyuan.png");
  }

  .icon-ellipse-select {
      background-image: url("../../static/whiteboardimg/tuoyuan.png");
  }

  .icon-square-black {
      background-image: url("../../static/whiteboardimg/juxing.png");
  }

  .icon-square-select {
      background-image: url("../../static/whiteboardimg/juxing.png");
  }

  .icon-rectangle-black {
      background-image: url("../../static/whiteboardimg/juxing.png");
  }

  .icon-rectangle-select {
      background-image: url("../../static/whiteboardimg/juxing.png");
  }

  .icon-rightangle-black {
      background-image: url("../../static/whiteboardimg/zhijiaosanjiaoxing.png");
  }

  .icon-rightangle-select {
      background-image: url("../../static/whiteboardimg/zhijiaosanjiaoxing.png");
  }

  .icon-equilateral-black {
      background-image: url("../../static/whiteboardimg/sanjiaoxing.png");
  }

  .icon-equilateral-select {
      background-image: url("../../static/whiteboardimg/sanjiaoxing.png");
  }

  .icon-isosceles-black {
      background-position: -196px -112px;
  }

  .icon-isosceles-select {
      background-position: -0px -140px;
  }

  .icon-isoscelesrighttriangle-black {
      background-position: -28px -140px;
  }

  .icon-isoscelesrighttriangle-select {
      background-position: -56px -140px;
  }

  .icon-remove-black {
      background-image: url("../../static/whiteboardimg/xiangpica.png");
  }

  .icon-remove-select {
      background-image: url("../../static/whiteboardimg/xiangpica.png");
  }

  .icon-clear-black {
      background-position: -140px -140px;
  }

  .icon-clear-select {
      background-position: -168px -140px;
  }

  .video-preview-modal-div {
      width: 69%;
      margin: 5% auto 0;
      text-align: center;
      background-color: #ffffff;
  }

  /********* 添加对错号 **************/
  .icon-right-black{
      display: inline-block;
      width: 26px;
      height: 26px;
      background-image: url(../../static/whiteboardimg/right.png);
      background-repeat: no-repeat;
      margin-top: 10px;
  }

  .icon-right-select{
      display: inline-block;
      width: 26px;
      height: 26px;
      background-image: url(../../static/whiteboardimg/right-sel.png);
      background-repeat: no-repeat;
      margin-top: 10px;
  }

  .icon-wrong-black{
      display: inline-block;
      width: 26px;
      height: 26px;
      background-image: url(../../static/whiteboardimg/wrong.png);
      background-repeat: no-repeat;
      margin-top: 10px;
  }

  .icon-wrong-select{
      display: inline-block;
      width: 26px;
      height: 26px;
      background-image: url(../../static/whiteboardimg/wrong-sel.png);
      background-repeat: no-repeat;
      margin-top: 10px;
  }

  .icon-right-small-black{
      display: inline-block;
      width: 28px;
      height: 28px;
      background-image: url(../../static/whiteboardimg/right-small.png);
      background-repeat: no-repeat;
      margin-top: 10px;
  }

  .icon-right-small-select{
      display: inline-block;
      width: 28px;
      height: 28px;
      background-image: url(../../static/whiteboardimg/right-small-sel.png);
      background-repeat: no-repeat;
      margin-top: 10px;
  }

  .icon-wrong-small-black{
      display: inline-block;
      width: 28px;
      height: 28px;
      background-image: url(../../static/whiteboardimg/wrong-small.png);
      background-repeat: no-repeat;
      margin-top: 10px;
  }

  .icon-wrong-small-select{
      display: inline-block;
      width: 28px;
      height: 28px;
      background-image: url(../../static/whiteboardimg/wrong-small-sel.png);
      background-repeat: no-repeat;
      margin-top: 10px;
  }

  .icon-submit-black{
      display: inline-block;
      width: 28px;
      height: 28px;
      background-image: url(../../static/whiteboardimg/submit.png);
      background-repeat: no-repeat;
      margin-top: 10px;
  }

  .icon-submit-select{
      display: inline-block;
      width: 28px;
      height: 28px;
      background-image: url(../../static/whiteboardimg/submit-sel.png);
      background-repeat: no-repeat;
      margin-top: 10px;
  }


  *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  .btn{
      width: 200px;
      height: 40px;
      border: 0px solid black;
      background-color: #e1e1e1;
      line-height: 40px;
      color: white;
      text-align: center;
      font-size: 16px;
  }

  .btnwh{
      width: 200px;
      height: 40px;
  }

  .tipwh{
      width: 400px;
      height: 40px;
  }

  .default-color{
      background-color: #2579d1;
  }

  .btn:hover{
      background-color: #2579d1;
  }

  .btn:focus {
      background-color: #2579d1;
      /*#00ff00;*/
  }


  .btn:active {
      background-color: #000000;
  }


  .flex-conlumn-center{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }

  .margin-left20{
      margin-left: 20px;
  }

  .flex-conlumn-start{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
  }

  .self-item{
      align-self: flex-start;
  }

  .flex-row-center{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      /*background-color: red;*/
  }

  .flex-row-start{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      /*background-color: red;*/
  }

  .margin-top10{
      margin-top: 10px;
  }


  .w100h40{
      width: 100px;
      height: 40px;
  }

  .w150h40{
      width: 150px;
      height: 40px;
  }

  .w120h40{
      width: 120px;
      height: 40px;
  }

  .w300h40{
      width: 300px;
      height: 40px;
  }

  .w160h40{
      width: 160px;
      height: 40px;
  }

  .margin-left10{
      margin-left: 10px;
  }
  .margin-left20{
      margin-left: 20px;
  }

  .w70h40{
      width: 70px;
      height: 40px;
  }

  .w50h40{
      width: 50px;
      height: 40px;
  }

  .normal-text{
      font-size: 15px;
      color: #333333;
      height: 30px;
      line-height: 30px;
  }

  .tip-text{
      color:#2579d1;
      font-size: 13px;
      height: 40px;
  }

  .h40{
      height: 40px;
  }

  .margin-top20{
      margin-top: 20px;
  }

  .margin-top40{
      margin-top: 40px;
  }

  .input-normal-w250{
      border: 0.5px solid #999999;
      width: 250px;
      height: 40px;
      text-indent: 10px;
  }

  .input-normal{
      border: 0.5px solid #999999;
      width: 300px;
      height: 40px;
      text-indent: 10px;
  }

  .narrow{
      width: 50px;
      height: 50px;
      background-color: #242020;
      border-radius: 25px;
      line-height: 50px;
      position: absolute;
      right: 5px;
      bottom: 20px;
      cursor: pointer;
      z-index: 1;
      color: #fff;
  }


  button{
        display: block;
        margin: auto;
        margin-top: 10px;
        clear: both;
    }

  .op{
      margin-top:15px;
      width: 100%;
      height: 50px;
      /*background:rgba(31,33,45,1);*/
      /*background:linear-gradient(0deg,rgba(0,0,0,1) 0%,rgba(69,69,69,1) 100%);*/
      /*border-radius:4px;*/
  }

  #nav {
      width: 660px;
      height: 50px;
      /*background:rgba(31,33,45,1);*/
      background:linear-gradient(0deg,rgba(0,0,0,1) 0%,rgba(69,69,69,1) 100%);
      border-radius:4px;
      margin: 0 auto;
      position: relative;
  }

  .texcolor{
      /*margin-left: 30px;*/
      left: 35px;
      bottom: 45px;
      position: absolute;
      z-index: 2;
  }


  #nav ul {
      list-style: none;
      border-radius:24px;
      /*margin-left: 50px;*/
  }



  #nav li {
      display: inline;
      line-height: 50px;
      float:left
  }


  .exit{
      margin-bottom: 10px;
      margin-right: 0px;
  }

    .row::before{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .row canvas{
       border:2px solid black;
    }
</style>
